<template>
  <div class="main">
    <el-form ref="userInfo" :model="userInfo" label-width="80px">
      <el-form-item label="个人头像">
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          :show-file-list="false"
          :on-success="onUploadSuccess"
        >
          <img
            v-if="userInfo.avartarurl == null"
            src="@/assets/未登录.png"
            class="avatar"
          />
          <img
            v-if="userInfo.avartarurl != null"
            :src="userInfo.avartarurl"
            class="avatar"
          />
        </el-upload>
      </el-form-item>
      <el-form-item label="重置密码">
        <el-input v-model="userInfo.password" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="choiceImg"
          >立即修改</el-button
        >
        <el-button size="mini">取消</el-button>
      </el-form-item>
    </el-form>

    <!-- left用用于上传头像
    <div class="imgleft fl"></div>
    <div class="imgright fr">
      <h2>请选择你的头像</h2>
      <el-button class="imgbutton" type="success" plain @click="choiceImg"
        >确定</el-button
      >
    </div> -->
  </div>
</template>

<script>
import personApi from "@/api/personApi";
export default {
  name: "imgchoice",
  data() {
    return {
      userInfo: {
        avartarurl: null,
        password: "",
      },

      uploadUrl: "http://localhost:8081/file/addFile",
    };
  },
  created() {
    this.getPersonInfo();
  },
  methods: {
    choiceImg() {
      if (this.identity == 0) {
        this.studentInfo.password = this.userInfo.password;
        this.studentInfo.avartarurl = this.userInfo.avartarurl;
        this.studentInfo.isfirsttimelogin = 0;
        this.updateStudentInfo(this.studentInfo);
      } else if (this.identity == 1) {
        this.teacherInfo.password = this.userInfo.password;
        this.teacherInfo.avartarurl = this.userInfo.avartarurl;
        this.teacherInfo.isfirsttimelogin = 0;
        this.updateTeacherInfo(this.teacherInfo);
      }
      this.$router.push({
        path: "/",
      });
    },
    updateStudentInfo(studentInfo) {
      personApi.updateStudentInfo(studentInfo).then((response) => {});
    },
    updateTeacherInfo(teacherInfo) {
      personApi.updateTeacherInfo(teacherInfo).then((response) => {});
    },
    getPersonInfo() {
      personApi.getPersonInfo().then((response) => {
        this.identity = response.data[0].identity;
        if (this.identity == 0) {
          this.studentInfo = response.data[0];
        } else {
          this.teacherInfo = response.data[0];
        }
      });
    },
    //触发submit函数后将fileList中的文件逐个上传并逐个触发该函数，作用是更新fileList为成功上传后的文件列表同时将后端返回的URL封装
    onUploadSuccess(attachmentUrl, file, fileList) {
      this.userInfo.avartarurl = attachmentUrl;
    },
  },
};
</script>

<style scoped>
.main {
  width: 400px;
  height: 300px;
  margin: 0 auto;
  margin-top: 250px;
  padding: 30px 0;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.imgleft {
  width: 60%;
}
.imgright {
  width: 40%;
  padding: 80px 0;
  /* background-color: pink; */
}
.imgbutton {
  margin: 20px 0;
}

/* 个人信息修改 */
.avatar-uploader {
  width: 125px;
  height: 125px;
  /* border: 1px dashed #d9d9d9; */
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 125px;
  height: 125px;
  line-height: 125px;
  text-align: center;
}
.avatar {
  width: 125px;
  height: 125px;
  border-radius: 6px;
  display: block;
}
</style>
